<template>
    <div class="task">
        <header-footer :commonData="{$parent:$parent}">
            <div id="task" v-cloak>
                <div class="task_crumb index_width">
                    <ul>
                        <li class="f_left">当前位置：</li>
                        <li class="f_left">
                            <router-link to="/home">首页></router-link>
                        </li>
                        <li class="f_left">
                            <router-link to="javascript:void(0)">在线学习</router-link>
                        </li>
                    </ul>
                </div>
                <div class="company_apply_tab_ul_box text_left">
                    <ul class="text_center company_apply_tab_ul task_tab_ul">
                        <div v-if="type==0">
                            <li v-for="(tab,index) in examTaskTabs" :key="index"
                                :class="{company_apply_tab_active:taskTabIndex==index}"
                                @click="getExamTaskList(tab.tradeNo,tab.projectType,tab.id,index,tab.productId,tab.theoryProductId,tab.isResit)">
                                {{tab.majorName}}
                            </li>
                        </div>
                        <!-- <li v-if="type==1" v-for="(tab,index) in education" :key="index"
                            :class="{company_apply_tab_active:taskTabIndex==index}"
                            @click="getEducationTaskList(tab.tradeNo,tab.period,tab.projectType,tab.id,index,tab.productId)">
                            {{tab.majorName}}
                        </li> -->
                    </ul>
                </div>
                <div class="clear"></div>
                <p style="width: 1200px;margin: 0 auto;color: #FF0000;margin-bottom: 10px;">已完成学业请到个人中心 --><router-link
                        style="color: #3A89CC;" to="/cont_education/user/download">下载中心</router-link>下载</p>
                <div class="task_list mainToBottom index_width text_center">
                    <div class="task_table_header">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <td width="20%">任务时间</td>
                                    <td width="38%">任务名称</td>
                                    <td width="26%">操作</td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="task_table_body">
                        <table width="100%">
                            <tr v-for="(item,index) in taskLists" :key="index">
                                <td width="20%">{{new Date(item.updateTime).Format("yyyy-MM-dd hh:mm:ss")}}</td>
                                <td width="38%">{{item.taskName}}</td>
                                <td v-if="item.isFinish == 0 && item.taskType == 0" width="26%">
                                    <template v-if="isResit != 1">
                                        <el-button type="primary" size="medium" :class="{isShow:item.isShowBtn}"
                                            @click="$refs.smallCodeChild.showSmallCodeDialog('task')">
                                            手机学习</el-button>
                                        <el-button type="success" size="medium" :class="{isShow:item.isShowBtn}"
                                            @click="toVideo(item.objectId,item.groupCode,item.id)">网页学习
                                        </el-button>
                                    </template>
                                </td>
                                <td v-if="item.isFinish == 0 && item.taskType == 1" width="26%">
                                    <template v-if="isResit != 1">
                                        <el-button type="primary" size="medium"
                                            @click="$refs.smallCodeChild.showSmallCodeDialog('task')">手机学习</el-button>
                                        <el-button type="success" size="medium" @click="toQuestion(item,1)">网页学习
                                        </el-button>
                                        <el-button type="danger" size="medium" @click="toQuestion(item,2)">错题集
                                        </el-button>
                                    </template>
                                </td>
                                <td v-if="isResit == 1" width="26%"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="task_download_certificate" :class="{showCertificate:isShowDownload}">
                        <button :disabled="disabled" @click="downLoadCertificate">下载证书</button>
                    </div>
                </div>
                <!-- 选择课时弹框 -->
                <el-dialog class="select_dialog dialog" title="请选择您的课程" :visible="viewClassDialog" width="60%">
                    <div class="text_center">
                        <!-- <h3 class="apply_title" style="display: inline-block;"></h3> -->
                        <div class="viewClassSumBox">
                            自定义课时（请选择{{period}}课时），已选择：{{classMoviesNum}}个课时
                        </div>
                        <div class="viewClassList">
                            <!-- 选择课时 -->
                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <el-checkbox @change="chooseThis($event,ke)" v-for="(ke,index) in viewClass"
                                    :label="ke.id" :key="index" :title="ke.courseName+'（'+ke.videosCount+'课时）'">
                                    {{ke.courseName}}
                                    <span class="viewClass_num">({{ke.videosCount}}个课时)</span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <router-link class="apply_return_task" to="/cont_education/index">返回首页</router-link>
                        <el-button type="primary" @click="viewClassSure(checkedCities)">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </header-footer>
        <smallCode ref="smallCodeChild"></smallCode>
    </div>
</template>

<script>
    import headerFooter from '../../../components/cont_education/header_and_footer.vue'
    import smallCode from '../../../components/smallCode.vue'
    export default {
        name: 'task',
        data() {
            return {
                classType: 0,
                taskTabIndex: 0,
                isShowDownload: false,
                disabled: true,
                examTaskTabs: [], //报名考试
                education: [], //继续教育
                taskLists: [],
                viewClassDialog: false,
                classHourNum: 0, //课时数
                classMoviesNum: 0, //视频数
                checkedCities: [], //弹框选择课时
                viewClass: [],
                applyId: 0,
                type: 0, //0考试报名  1继续教育
                tradeNo: 0, //报名tradeNo
                period: 0, //继续教育课时数
                productId: 0,
                theoryProductId: 0,
                isResit: 0
            }
        },
        mounted: function() {
            this.type = this.$route.params.type;
            this.tradeNo = this.$route.params.tradeNo;
            this.applyId = this.$route.params.applyId;
            this.period = this.$route.params.period;
            if (parseInt(this.type) == 0) {
                this.slryGetMyApplySuccess();
            } else {
                this.getMyApplySuccess();
            }
        },
        methods: {
            showsmallcode: function() {

            },
            //三类特种工任务
            slryGetMyApplySuccess: function() {
                var that = this;
                this.common.post(this.api.slryGetMyApplySuccess, {}, function(res) {
                    if (String.isEmptyOrNUll(res.resultMap)) {
                        that.$message.error("当前没有要学习的课程！");
                        that.back();
                        return;
                    }
                    that.examTaskTabs = res.resultMap.slry;
                    that.examTaskTabs = that.examTaskTabs.concat(res.resultMap.tzgThe);
                    if (that.examTaskTabs.length <= 0) {
                        that.$message.error("当前没有要学习的课程！");
                        that.taskLists = [];
                        that.back();
                        return;
                    }
                    that.isResit = that.examTaskTabs[0].isResit;
                    that.getExamCurrentTab(); // 获取当前tab
                });
            },
            getExamCurrentTab: function() {
                var that = this;
                var nowIndex = 0;
                if (that.tradeNo != 0) {
                    that.examTaskTabs.forEach(function(v, i) {
                        if (v.id == that.applyId) {
                            nowIndex = i;
                            return;
                        }
                    });
                    that.isResit = that.examTaskTabs[nowIndex].isResit;
                    that.tradeNo = that.examTaskTabs[nowIndex].tradeNo;
                    that.applyId = that.examTaskTabs[nowIndex].id;
                    that.classType = that.examTaskTabs[nowIndex].projectType;
                    that.productId = that.examTaskTabs[nowIndex].productId;
                    that.theoryProductId = that.examTaskTabs[nowIndex].theoryProductId;
                    that.getExamTaskList(that.tradeNo, that.classType, that.applyId, nowIndex, that.productId, that
                        .theoryProductId, that.isResit);
                } else {
                    that.isResit = that.examTaskTabs[0].isResit;
                    that.tradeNo = that.examTaskTabs[0].tradeNo;
                    that.applyId = that.examTaskTabs[0].id;
                    that.classType = that.examTaskTabs[0].projectType;
                    that.productId = that.examTaskTabs[0].productId;
                    that.theoryProductId = that.examTaskTabs[0].theoryProductId;
                    that.getExamTaskList(that.tradeNo, that.classType, that.applyId, 0, that.productId, that
                        .theoryProductId, that.isResit);
                }
            },
            getExamTaskList: function(tradeNo, classType, applyId, index, productId, theoryProductId, isResit) {
                var that = this;
                that.isResit = isResit;
                this.tradeNo = tradeNo;
                this.applyId = applyId;
                this.classType = classType;
                if (productId == undefined) {
                    this.productId = theoryProductId;
                } else {
                    this.productId = productId;
                }
                this.taskTabIndex = index;
                this.common.post(this.api.getTasks, {
                    tradeNo: tradeNo,
                    classType: classType,
                    productId: this.productId
                }, function(res) {
                    if (res.resultMap.length <= 0 || res.resultMap == "无学习任务") {
                        that.$message.error("当前没有要学习的课程！");
                        that.taskLists = [];
                        return;
                    }
                    that.taskLists = res.resultMap;
                    that.taskLists.forEach((v,i)=>{
                        if (v.taskType==0) {
                        	that.taskLists.splice(i, 1);
                        	that.taskLists.unshift(v);
                        }
                    });
                    
                });
            },
            /* 继续教育 */
            getMyApplySuccess: function() {
                var that = this;
                this.common.post(this.api.getMyApplySuccess, {}, function(res) {
                    if (String.isEmptyOrNUll(res.resultMap)) {
                        that.$message.error("当前没有要学习的课程！");
                        that.back();
                        return;
                    }
                    that.education = res.resultMap;
                    if (res.resultMap.length <= 0) {
                        that.$message.error("当前没有要学习的课程！");
                        that.back();
                        return;
                    }
                    that.getCurrentTab(); // 获取当前tab
                });
            },
            getCurrentTab: function() {
                var that = this;
                var nowIndex = 0;
                if (that.tradeNo != 0) {
                    that.education.forEach(function(v, i) {
                        if (v.id == that.applyId) {
                            nowIndex = i;
                            return;
                        }
                    });
                    that.tradeNo = that.education[nowIndex].tradeNo;
                    that.applyId = that.education[nowIndex].id;
                    that.period = that.education[nowIndex].period;
                    that.classType = that.education[nowIndex].projectType;
                    that.productId = that.education[nowIndex].productId;
                    that.getEducationTaskList(that.tradeNo, that.period, this.classType, this.applyId, nowIndex,
                        that.productId);
                } else {
                    that.tradeNo = that.education[0].tradeNo;
                    that.applyId = that.education[0].id;
                    that.period = that.education[0].period;
                    that.classType = that.education[0].projectType;
                    that.productId = that.education[0].productId;
                    that.getEducationTaskList(that.tradeNo, that.period, this.classType, this.applyId, 0, that
                        .productId);
                }
            },

            getEducationTaskList: function(tradeNo, period, classType, applyId, index, productId) {
                var that = this;
                this.tradeNo = tradeNo;
                this.applyId = applyId;
                this.classType = classType;
                this.productId = productId;
                this.period = period;
                this.classMoviesNum = 0;
                this.taskTabIndex = index;
                this.common.post(this.api.getTasks, {
                    tradeNo: tradeNo,
                    classType: classType,
                    productId: productId
                }, function(res) {
                    if (res.ext == 3 && that.type == 1) {
                        that.getCourses();
                        that.taskLists = [];
                        that.viewClassDialog = true;
                        return;
                    }
                    if (res.resultMap.length <= 0 || res.resultMap == "无学习任务") {
                        that.$message.error("当前没有要学习的课程！");
                        that.taskLists = [{}];
                        that.back();
                        return;
                    }
                    that.viewClassDialog = false;
                    that.taskLists = res.resultMap;
                    that.educationShowDownload();
                });
            },
            educationShowDownload: function() {
                var that = this;
                var arr = that.taskLists;
                arr.forEach(function(v, i) {
                    v.isShowBtn = true;
                });
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].isFinish != 1 && arr[i].isOver != 1) {
                        arr[i].isShowBtn = false;
                        that.isShowDownload = false;
                        that.disabled = true;
                        return;
                    } else {
                        that.isShowDownload = true;
                        that.disabled = false;
                    }
                }
            },
            getCourses: function() {
                var that = this;
                this.common.post(this.api.getCourses, {
                    applyId: that.applyId
                }, function(res) {
                    that.viewClass = res.resultMap;
                }, function(err) {
                    that.$message.success(err.resultMsg);
                    window.location.reload();
                });
            },
            toVideo: function(objectId, groupCode,id) {
                if (String.isEmptyOrNUll(objectId)) {
                    this.common.toPage("/404");
                } else {
                    this.common.toPage(String.Format('/home/play/trainVideo/{0}/{1}/{2}/{3}', objectId, this.applyId,
                        groupCode,id));
                }
            },
            toQuestion: function(item, num) {
                if (String.isEmptyOrNUll(item.objectId)) {
                    this.common.toPage('/404');
                } else {
                    this.common.toPage(String.Format('/home/play/question/{0}/{1}/{2}/{3}', item.objectId, num,
                        this.tradeNo,item.id));
                }
            },
            handleCheckedCitiesChange: function(val) {
                this.classHourNum = val.length;
            },
            chooseThis: function(status, res) {
                if (status) {
                    this.classMoviesNum += parseInt(res.videosCount);
                } else {
                    this.classMoviesNum -= parseInt(res.videosCount);
                }
            },
            //选择课时
            viewClassSure: function(datas) {
                var that = this;
                if (datas.length <= 0) {
                    return;
                }
                if (parseInt(this.classMoviesNum) != parseInt(this.period)) {
                    this.$message.error("选择课时数量有误,请选择" + this.period + "课时");
                    return;
                }
                var courseIds = "";
                datas.forEach(function(v, i) {
                    courseIds += v + ',';
                });
                courseIds = courseIds.substr(0, courseIds.length - 1);
                this.viewClassDialog = false;
                this.common.post(this.api.chooseCourse, {
                    applyId: that.applyId,
                    tradeNo: that.tradeNo,
                    courseIds: courseIds
                }, function(res) {
                    that.getEducationTaskList(that.tradeNo, that.period, that.classType, that.applyId, that
                        .taskTabIndex);
                    that.getCurrentTab();
                    window.location.reload();
                });
            },

            back: function() {
                var that = this;
                setTimeout(function() {
                    if (that.type == 0) {
                        that.common.toPage("/home");
                    } else {
                        that.common.toPage("/cont_education/index");
                    }
                }, 2000);
            },
            downLoadCertificate: function() {
                var that = this;
                this.common.post(this.api.lookCertificate, {
                    applyid: that.applyId
                }, function(res) {
                    that.$message.success("正在生成中...");
                    setTimeout(function() {
                        window.location.href = res.resultMap;
                    }, 2000);
                });
            }
        },
        components: {
            headerFooter,
            smallCode
        }
    }
</script>

<style>
    body {
        background: #ffffff;
    }

    .task_table_body tr td .isShow {
        display: none !important;
    }

    .apply_return_task {
        background: transparent;
        color: #333333;
        border: 1px solid #cccccc;
        outline: none;
        font-size: 16px;
        display: inline-block;
        height: 38px;
        line-height: 38px;
        border-radius: 4px;
        margin: 0 10px;
        padding: 0 16px;
    }

    .el-dialog__wrapper.select_dialog.dialog .el-dialog__header {
        padding: 20px 20px 10px;
        padding-bottom: 20px;
    }

    .select_dialog .el-dialog__close.el-icon.el-icon-close {
        display: none;
    }

    .select_dialog .viewClassList .el-checkbox {
        text-align: left;
        padding-left: 20px;
        overflow: hidden;
    }

    .btn_err {
        border: 1px solid red;
        color: red;
    }

    .task_table_body tr:hover .btn_err {
        background: red;
        color: #ffffff;
    }
</style>
